<template>
	<coreshop-page title="支付" mode="left">
		<view class="layout-pay-box m-25">
			<!-- 支付信息 -->
			<view class="order-smg">
				<view class="title">支付信息</view>
				<view class="item">
					<view class="lab">订单类型</view>
					<view class="val" v-if="isGoodsOrder()">商品订单</view>
					<view class="val" v-if="state.orderType === PaymentTypeEnum.recharge">充值订单</view>
					<view class="val" v-if="state.orderType === PaymentTypeEnum.formPay">付款码</view>
					<view class="val" v-if="state.orderType === PaymentTypeEnum.formOrder">表单订单</view>
					<view class="val" v-if="state.orderType === PaymentTypeEnum.serviceOrder">服务订单</view>
				</view>
				<view v-if="isGoodsOrder()">
					<view class="item">
						<view class="lab">订单号</view>
						<view class="val">
							<view v-for="item, index in state.orderInfo?.rel" :key="index">
								{{ item.sourceId }}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="lab">订单金额</view>
						<view class="val price">￥{{ state.orderInfo?.money }}</view>
					</view>
				</view>
				<view v-else-if="state.orderType === PaymentTypeEnum.recharge">
					<view class="item">
						<view class="lab">充值规则</view>
						<view class="val">{{ state.typeDetail?.title }}</view>
					</view>
					<view class="item">
						<view class="lab">支付金额</view>
						<view class="val price">￥{{ state.typeDetail?.defaultMoney }}</view>
					</view>
					<view class="item" v-if="state.typeDetail?.giftMoney > 0">
						<view class="lab">赠送金额</view>
						<view class="val">{{ state.typeDetail?.giftMoney }}</view>
					</view>
					<view class="item" v-if="state.typeDetail?.giftPoint > 0">
						<view class="lab">赠送积分</view>
						<view class="val price">￥{{ state.typeDetail?.giftPoint }}</view>
					</view>
				</view>
				<view v-else-if="state.orderType === PaymentTypeEnum.serviceOrder">
					<view class="item">
						<view class="lab">购买服务</view>
						<view class="val">{{ state.serviceDetail?.title }}</view>
					</view>
					<view class="item">
						<view class="lab">服务金额</view>
						<view class="val price">￥{{ state.serviceDetail?.money }}</view>
					</view>
				</view>
				<view v-else>
					<view class="item">
						<view class="lab">支付金额</view>
						<view class="val price">￥{{ state?.recharge }}</view>
					</view>
				</view>
			</view>
			<!-- 支付信息 -->
			<view class="order-smg">
				<view class="title">支付方式</view>
				<PayMethod ref="payMethod" :payMethodList="state.payMethodList" :orderType="state.orderType"
					:orderId="state.orderId" :recharge="state.recharge" :userInfo="state.userInfo"
					@handleSelectPay="handleSelectPay"></PayMethod>
			</view>
			<!-- 提示信息 -->
			<view class="tips-box">注：如果您在支付中选择的支付方式不适合或异常，请再次选择其他支付方式。</view>

			<!-- 底部按钮 -->
			<coreshop-fixed-bottom-button title="立即支付" @onClick="onPayNow()"
				:loading="loading"></coreshop-fixed-bottom-button>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryPayMethodList, queryUserInfo, queryPaymentsCheckpay, queryServiceDetail, queryTypeDetail } from '@/core/api';
	import type { Response, PayMethodListType, UserInfoType } from '@/core/models';
	import { PaymentTypeEnum } from '@/core/enum';
	import { handleShowToast } from '@/core/utils';
	import PayMethod from '@/pages/components/pay-method/index.vue';

	interface QueryParams {
		orderId ?: string;    /** 订单id */
		orderType ?: number;  /** 订单类型 */
		recharge ?: number;   /** 充值 */
		serviceId ?: number;  /** 服务id */
		formId ?: number;     /** 表单id */
	}

	const payMethod = ref();
	const loading = ref(false);
	const state = reactive<{
		payMethodList : Array<PayMethodListType>;
		payCode : string;
		orderId : number | string;
		recharge : number;
		serviceId : number | string;
		formId : number | string;
		orderType : PaymentTypeEnum,
		userInfo : UserInfoType,
		orderInfo : any;
		serviceDetail : any;
		typeDetail : any;
	}>({
		payMethodList: [],
		payCode: '',
		orderId: 0,
		recharge: 0,
		serviceId: 0,
		formId: 0,
		orderType: PaymentTypeEnum.common,
		userInfo: {},
		orderInfo: {},
		serviceDetail: {},
		typeDetail: {},
	});

	onLoad(async (query : QueryParams) => {
		/** 获取用户信息 */
		getUserInfo();
		/** 订单id */
		state.orderId = query?.orderId || 0;
		/** 订单类型 */
		state.orderType = Number(query?.orderType) || 0;
		/** 金额id */
		state.recharge = query?.recharge || 0;
		/** 服务id */
		state.serviceId = query?.serviceId || 0;
		/** 表单id */
		state.formId = query?.formId || 0;
		/** 判断订单类型 */
		handleJudgeOrderType();
		/** 获取支付方式 */
		getPayMethodList();
	})

	/** 判断订单类型 */
	const handleJudgeOrderType = () => {
		if (state.orderId && isGoodsOrder()) {
			/** 获取订单信息 */
			getOrderInfo();
		} else if (state.recharge > 0 && state.orderType === PaymentTypeEnum.recharge) {
			/** 充值订单 获取用户id */
			getTypeDetail();
		} else if (state.formId && (state.orderType === PaymentTypeEnum.formPay || state.orderType === PaymentTypeEnum.formOrder)) {
			/** 表单id传到订单id上 */
			state.orderId = state.formId;
		} else if (state.orderType === PaymentTypeEnum.serviceOrder) {
			/** 获取服务详情 */
			getServiceDetail();
		} else {
			handleShowToast('订单支付参数错误', 'none', () => {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000)
			});
		}
	}

	/** 判断是商品订单 */
	const isGoodsOrder = () => {
		return (
			state.orderType === PaymentTypeEnum.common ||
			state.orderType === PaymentTypeEnum.pinTuan ||
			state.orderType === PaymentTypeEnum.group ||
			state.orderType === PaymentTypeEnum.seckill ||
			state.orderType === PaymentTypeEnum.bargain ||
			state.orderType === PaymentTypeEnum.giveaway ||
			state.orderType === PaymentTypeEnum.solitaire ||
			state.orderType === PaymentTypeEnum.transactionComponent
		)
	}

	/** 获取订单信息 */
	const getOrderInfo = async () => {
		const orderInfo : Response<any> = await queryPaymentsCheckpay({
			ids: state.orderId,
			paymentType: state.orderType
		});
		if (orderInfo.status) {
			state.orderInfo = orderInfo.data;
		} else {
			handleShowToast(orderInfo.msg);
		}
	}

	/** 获取用户信息 */
	const getUserInfo = async () => {
		const userInfo : Response<UserInfoType> = await queryUserInfo();
		if (userInfo.status) {
			state.userInfo = userInfo?.data;
		} else {
			handleShowToast(userInfo.msg);
		}
	}

	/** 获取单个充值规则 */
	const getTypeDetail = async () => {
		const typeDetail : Response<any> = await queryTypeDetail({ id: state.recharge });
		if (typeDetail.status) {
			state.typeDetail = typeDetail?.data;
		} else {
			handleShowToast(typeDetail.msg);
		}
	}

	/** 获取服务详情 */
	const getServiceDetail = async () => {
		const serviceDetail : Response<any> = await queryServiceDetail({
			id: state.serviceId
		});
		if (serviceDetail.status) {
			state.serviceDetail = serviceDetail?.data;
		} else {
			handleShowToast(serviceDetail.msg);
		}

	}

	/** 获取支付方式 */
	const getPayMethodList = async () => {
		const payMethodList : Response<Array<PayMethodListType>> = await queryPayMethodList();
		state.payMethodList = payMethodList.data;
	}

	/** 选择支付类型 */
	const handleSelectPay = (payCode : string) => {
		state.payCode = payCode;
	}

	/** 立即支付 */
	async function onPayNow() {
		if (state.payCode) {
			loading.value = true;
			payMethod.value.handlePayNow(loading);
			console.log('xxx');
		} else {
			handleShowToast('请选择支付方式');
		}
	}
</script>
<style lang="scss" scoped>
	@import './pay.scss';
</style>